<template>
	<div>
		<div class="">
			<div class="search">
				<uni-search-bar
					@confirm="search"
					@clear="reset"
					placeholder="请输入方案名称"
					v-model="queryParams.schemeName"
					:radius="999"
					cancelButton="none"></uni-search-bar>
			</div>
			<div class="handleBox">
				<div class="add handleBox-item">
					<uni-icons
						type="plusempty"
						size="25"
						@click="toEdit(item, 'add')"></uni-icons>
				</div>
				<div class="toTop handleBox-item">
					<uni-icons
						custom-prefix="iconfont"
						type="icon-fanhuidingbu"
						size="30"
						@click="toTop"></uni-icons>
				</div>
			</div>
			<div class="box">
				<div class="item" v-for="(item, index) in datalist">
					<div class="content" @click="toEdit(item, 'preview')">
						<div class="content_item content_item-title">
							<div class="content_item-label">方案编号：</div>
							<div class="content_item-content">
								{{ item.calcSchemeCode }}
							</div>
						</div>
						<div class="content_item">
							<div class="content_item-label">方案名称：</div>
							<div class="content_item-content">
								{{ item.schemeName }}
							</div>
						</div>
						<div class="content_item">
							<div class="content_item-label">出租方：</div>
							<div class="content_item-content">
								{{ item.lessorName }}
							</div>
						</div>
						<div class="content_item">
							<div class="content_item-label">承租方：</div>
							<div class="content_item-content">
								{{ item.leaseeName }}
							</div>
						</div>
						<div class="content_item">
							<div class="content_item-label">方案状态：</div>
							<div class="content_item-content">
								{{ item.quotaStatusStr }}
							</div>
						</div>
					</div>
					<div class="handler">
						<button
							size="mini"
							@click.stop="toEdit(item, 'edit')"
							v-if="getBtnType(item)"
							type="primary">
							编辑
						</button>
						<button
							size="mini"
							@click.stop="toEdit(item, 'copy')"
							type="primary">
							复用
						</button>
						<button
							size="mini"
							@click.stop="remove(item, index)"
							v-if="getBtnType(item)"
							type="primary">
							删除
						</button>
					</div>
				</div>
				<uni-load-more :status="status" />
			</div>
		</div>
	</div>
</template>
<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import FromItem from '@/pages/quota/apply/coms/formItem/index.vue';

	export default {
		name: 'Apply',
		components: { FromItem },
		dicts: ['expense_business_type'],
		mixins: [],
		props: {},
		data() {
			return {
				a: {
					b: '',
				},
				status: 'more',
				loading: false,
				SearchFormItems: [],
				queryParams: {
					pageNum: 1,
					pageSize: 20,
				},
				datalist: [],
				total: 0,
				dicts: {
					// 合同类型
					contractType: [
						{
							label: '短租',
							value: '1',
						},
						{
							label: '渠道',
							value: '2',
						},
						{
							label: '自营',
							value: '3',
						},
						{
							label: '代收代付',
							value: '4',
						},
					],
					// 提报类型
					applyType: [
						{
							label: '手动提报',
							value: '0',
						},
						{
							label: '自动生成',
							value: '1',
						},
					],
				},
			};
		},
		onLoad(options) {
			this.init();
		},
		mounted() {},
		computed: {},
		watch: {},
		methods: {
			sure(val) {
				console.log(val);
			},
			init() {
				this.getList('init');
			},
			handleSizeChange(val) {
				if (this.currentPage * val > this.total) {
					this.currentPage = 1;
				}
				this.$emit('setSizeCurrent', {
					page: this.currentPage,
					limit: val,
				});
			},
			/*当前页数改变*/
			handleCurrentChange(val) {
				this.$emit('setSizeCurrent', {
					page: val,
					limit: this.pageSize,
				});
			},
			getBtnType(row) {
				// return true;
				if (
					(row.quotaStatus == '1' || row.quotaStatus == '4') &&
					row.quotaStatusStr != '已被拒绝'
				) {
					return true;
				} else {
					return false;
				}
			},

			getList(type) {
				if (type == 'init') {
					this.datalist = [];
				}
				if (this.datalist.length >= this.total && type !== 'init') {
					this.status = 'no-more';
					return;
				}
				this.status = 'loading';

				let params = this.A_deepClone(this.queryParams);
				params.quotaType = '2';
				apis.List(params)
					.then(res => {
						if (res.code == 200) {
							this.datalist.push(...(res.rows ?? []));
							this.total = res.total ?? 0;
						}
					})
					.catch(() => {
						this.status = 'no-more';
					})
					.finally(() => {
						uni.stopPullDownRefresh();
					});
			},
			getRowClass({ row }) {
				if (
					row.calcSchemeDetailList?.length === 0 ||
					row.calcSchemeDetailList === undefined
				) {
					// 即该行没有子元素时，添加row-expand-cover类
					return 'row-expand-cover';
				}
			},
			reset() {
				this.queryParams = { pageNum: 1, pageSize: 10 };
				this.getList('init');
			},
			search() {
				this.queryParams.pageNum = 1;
				this.getList('init');
			},
			toEdit(row, type) {
				let url = '';
				switch (type) {
					case 'edit':
						url = `/pages/quota/apply/add/index?id=${row.calcSchemeId}&from=edit`;
						break;
					case 'copy':
						url = `/pages/quota/apply/add/index?id=${row.calcSchemeId}&from=copy`;
						break;
					case 'add':
						url = `/pages/quota/apply/add/index?from=add`;
						break;
					case 'preview':
						url = `/pages/quota/apply/preview/index?id=${row.calcSchemeId}&from=preview`;
						break;
				}
				this.$tab.navigateTo(url);
			},
			remove(row, index) {
				uni.showModal({
					title: '提示',
					content: `此操作将删除此额度申请方案, 是否继续?`,
					showCancel: true,
					success: ({ confirm, cancel }) => {
						uni.showLoading({
							title: '加载中...',
							mask: true,
						});
						apis?.Remove(row.calcSchemeId)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功！',
									});
									this.datalist.splice(index, 1);
								}
							})
							.finally(() => {
								uni.hideLoading();
							});
					},
				});
			},
			Refresh() {
				this.queryParams.pageNum = 1;
				this.getList('init');
			},
			ReachBottom() {
				this.queryParams.pageNum += 1;
				this.getList();
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
				});
			},
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom(e) {
			this.queryParams.pageNum += 1;
			this.getList();
		},
		onPullDownRefresh() {
			this.queryParams.pageNum = 1;
			this.getList('init');
		},
	};
</script>
<style lang="scss" scoped>
	.pagination {
		display: flex;
		justify-content: flex-end;
	}
	.handleBox {
		position: fixed;
		right: 60rpx;
		bottom: 150rpx;
		z-index: 10;
		display: flex;
		flex-direction: column;
		gap: 15rpx 0;
		.handleBox-item {
			width: 100rpx;
			aspect-ratio: 1;
			background-color: #fff;
			border-radius: 100%;
			// padding: 15rpx;
			box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
				-18px -18px 30px rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	::v-deep .cell:empty::before {
		content: '-';
	}
	.box {
		display: flex;
		flex-direction: column;
	}
	.item {
		display: flex;
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		flex-direction: column;
		.content_item-title {
			padding-bottom: 20rpx;
			margin-bottom: 10rpx;
			font-weight: 400;
			border-bottom: 1px solid #f5f5f5;
		}

		.content_item {
			display: flex;
			.content_item-label {
				width: 150rpx;
				font-weight: 500;
			}
			.content_item-content {
				flex: 1;
				min-width: 0;
			}
		}
		.content {
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: 10rpx 0;
		}
		.handler {
			padding-top: 25rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			gap: 0rpx 15rpx;
			button {
				margin: 0;
			}
		}
	}
	.search {
		width: 100%;
		position: sticky;
		top: 0;
		background-color: #fff;
		border-radius: 0 0 15rpx 15rpx;
	}
</style>
